<template>
	<div class="page-search">
		<HyForm v-bind="searchFormConfig" v-model="formData">
			<template #header>
				<h1>高级检索</h1>
			</template>
			<template #footer>
				<el-button class="el-btn" @click="handlerResetClick"
					><el-icon class="el-icon"><Refresh /></el-icon>重置</el-button
				>
				<el-button type="primary" class="el-btn" @click="handleQueryClick"
					><el-icon class="el-icon"><Search /></el-icon>立即检索</el-button
				>
			</template>
		</HyForm>
	</div>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue'
	import HyForm from '@/base-ui/form/index'

	export default defineComponent({
		props: {
			searchFormConfig: {
				type: Object,
				required: true
			}
		},
		components: {
			HyForm
		},
    emits:['resetBtnClick','queryBtnClick'],
		setup(props,{emit}) {
			//双向绑定的数据应该是由配置文件中的field生成的
			const formItems = props.searchFormConfig.formItems ?? []
			const formOriginData: any = {}
			for (let item of formItems) {
				formOriginData[item.field] = ''
			}
			const formData = ref(formOriginData)
			//当用户点击重置
			const handlerResetClick = () => {
				for (let key in formOriginData) {
					formData.value[key] = formOriginData[key]
				}
        emit('resetBtnClick')
			}
      //当用户点击搜索
      const handleQueryClick = ()=>{
        emit('queryBtnClick',formData.value)
      }
			return {
				formData,
				handlerResetClick,
        handleQueryClick
			}
		}
	})
</script>


<style>
</style>